<template>
  <div id="login"  >

    <div class="me-login-box me-login-box-radius">
      <h1>登录</h1>
<!--      {{userForm}}-->

      <el-form ref="userForm" :model="userForm" :rules="rules" >
        <el-form-item prop="username" >
          <div class="my-form1">
            <input  class="my-input" placeholder="用户名" v-model="userForm.username" ref="username"/>
          </div>
        </el-form-item>

        <el-form-item prop="password" >
          <div class="my-form1">
            <input class="my-input" placeholder="密码" type="password"
                   v-model="userForm.password" ref="password" @keyup="onHCapitalize($event)"/>
            <i v-show="bigChar" class="bigchar">大写锁已打开</i>
          </div>
        </el-form-item>

        <el-form-item size="small" class="me-login-button">
          <el-button type="primary" @click="login()">登录</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      userForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          {required: true, message: '用户名不能为空'}//trigger: 'blur'
        ],
        password: [
          {required: true, message: '密码不能为空'},
          {min: 6, message: 'password must be at least 6 characters'}
        ]
      },
      flag:'false',
      bigChar:'false'
    }
  },
  methods: {
    login() {
      let that = this

      this.$axios({
        method: 'get',
        url: `user/login/${this.userForm.username}/${this.userForm.password}`,
        responseType: 'json'
      }).then(({data})=>{
        console.log(data)
        if (data.code == 0) {
          this.$message.success(data.msg)
          this.$router.push({name: 'home'})
        }else if (data.code == 500) {
          this.$message.error(data.msg)
        }
      })



          // .then(function (response) {
          //   console.log(response);
          //   if (response.data==='登录成功'){
          //     // user:that.userForm.username
          //     that.$store.commit('updateUserName',that.userForm.username)
          //     that.$router.push({name:'Home'});
          //   }else if(response.data==='登录失败'){
          //     alert("登录失败，用户名不存在或者密码错误")
          //   }
          // })

    },
    show(){
      if(this.flag){
        // this.$refs.eyes.src="../../static/img/eyes.png";
        this.$refs.password.setAttribute("type", "text");
      }else{
        // this.$refs.eyes.src="../../static/img/eyesclosed.png";
        this.$refs.password.setAttribute("type", "password");
      }
      this.flag=!this.flag;
    },

    onHCapitalize(event) { // 大写键盘锁打开事件
      if(this.firstTochar){
        if(event.keyCode===20){
          this.bigChar=!this.bigChar;
          return;
        }
      }
      //未输入过字母键，或按键不是caps lock，判断每次最后输入的字符的大小写
      var e = event||window.event;
      var keyvalue = e.keyCode ? e.keyCode : e.which;
      var shifKey = e.shiftKey ? e.shiftKey:((keyvalue == 16) ? true : false);//左右Shift

      var strlen = this.userForm.password.length;
      var password=this.userForm.password;
      if(strlen){
        var uniCode =password.charCodeAt(strlen-1);
        if(keyvalue>=65 && keyvalue<=90){
          //如果是字母键
          this.firstTochar=true;
          if(((uniCode >= 65 && uniCode <= 90) && !shifKey)||((uniCode >= 97 && uniCode <= 122) && shifKey)){
            this.bigChar=true;
          }else{
            this.bigChar=false;
          }
        }
      }
    }
  }
}
</script>

<style scoped>
#my-form1{
  position: relative;
}
#password-img{
  width: 25px;
  height: 25px;
  position: absolute;
  margin-top: -12.5px;
  top:50%;
  left: 5px;
}
#user-img{
  width: 20px;
  height: 20px;
  position: absolute;
  margin-top: -10px;
  top:50%;
  left: 5px;
}
#eyes-img{
  width: 20px;
  height: 20px;
  position: absolute;
  margin-top: -10px;
  top:50%;
  right:10px;
}
#login {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  background-color: #464646;
  color: #FFFFFF;
}
.me-login-box {
  position: absolute;
  width: 300px;
  height: 260px;
  background-color: #464646;
  margin-top: 150px;
  margin-left: -180px;
  left: 50%;
  padding: 30px;
}
.me-login-box-radius {
  border-radius: 10px;
}
.me-login-box h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  vertical-align: middle;
}
.me-login-design {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
}
.me-login-design-color {
  color: #5FB878 ;
}
.me-login-button {
  text-align: center;
}
.me-login-button button {
  width: 100%;
}
.my-input{
  width: 255px;
  height: 35px;
  background: #323232 !important;
  color: #FFFFFF;
  border: 0.1px solid #797979;
  padding-left: 35px;
}
.bigchar{
  width: 100px;
  height: 30px;
  position: absolute;
}
</style>

